<template>
  <a-breadcrumb v-if="isShow" class="breadcrumb" separator=">">
    <a-breadcrumb-item v-for="(item) in breadList" :key="item.name">
      <router-link
        :to="{ path: item.path === '' ? '/' : item.path }"
        > 
        {{ item.meta.title }}
         </router-link> 
    </a-breadcrumb-item>
    
  </a-breadcrumb>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      breadList: []
    };
  },
  created() {
    this.getBreadcrumb();
  },
  computed: {
    isShow() {
      return this.breadList.length > 0;
    }
  },
  methods: {
    getBreadcrumb() {
      // debugger
      this.breadList = [];
      this.name = this.$route.name;
      let matched = this.$route.matched;
      if (matched.length > 0) {
        for (let i = 0; i < matched.length; i++) {
          if (matched[i].meta.hideTitle === undefined) {
            this.breadList.push(matched[i]);
          }
        }
      }

      // console.log(this.breadList);
      // debugger
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  }
};
</script>

<style scoped>
.ant-breadcrumb {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-variant: tabular-nums;
      /* line-height: 3.3; */
      margin-top: 24px;
      margin-bottom: 24px;
      list-style: none;
      -webkit-font-feature-settings: "tnum";
      font-feature-settings: "tnum";
      color: #666666;
      font-size: 13px;
      font-family: SimSun;
      font-weight: 400;
    }
</style>
